<template>
  <div>
    <van-nav-bar title="商品搜索" left-arrow @click-left="$router.go(-1)" />
    <van-search
      v-model="keyword"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      @blur="search"
    />
    <div>
      <span>历史记录</span><van-icon name="delete-o" @click="del"/>
    </div>
    <div class="historylist">
      <p v-for="(item, key) in $store.state.history" :key="key">{{ item }}</p>
    </div>
    <div>
      <hotsale :hotlist="searchlist"></hotsale>
    </div>
  </div>
</template>

<script>
import hotsale from "../home/hotsale";
export default {
  components: { hotsale },
  data() {
    return {
      keyword: "", //关键字
      hotlist: [],
      searchlist: [], //搜索的数据
      historylist: this.$store.state.history,
    };
  },
  created() {},
  mounted() {
    this.gethotlist();
  },
  methods: {
    //   列表数据
    gethotlist() {
      this.$axios.get("https://api.it120.cc/small4/shop/goods/list").then((res) => {
        // console.log(res);
        this.hotlist = res.data;
      });
    },
    // 搜索
    search() {
      if (this.keyword == "") {
          return false
      }
      this.searchlist = this.hotlist.filter((item) => {
        return item.name.includes(this.keyword);
      });
      // console.log(this.searchlist)
      this.gethotlist();
      // 历史记录
      this.$store.commit("history", this.keyword);
      this.keyword = '';
    },
    del(){
        this.$store.commit('del')
    }
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.right-cate {
  width: 31%;
  margin: 1%;
  img {
    width: 100%;
  }
}
.historylist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  p {
    background: #ddd;
    margin-left: 5px;
    padding: 10px;
    text-align: center;
  }
}
</style>
